/*
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-11 12:18:08
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-11 12:37:26
 */

import { ref, watchEffect } from "vue";

// 缓存操作
const todoStorage = {
  fetch() {
    let todos = JSON.parse(localStorage.getItem("vue3-todos") || "[]");
    todos.map((v, idx) => {
      v.id = idx + 1;
      return v;
    });
    return todos;
  },
  save(todos) {
    localStorage.setItem("vue3-todos", JSON.stringify(todos));
  },
};
export function useTodos(state) {
  const todos = ref(todoStorage.fetch());
  const addTodo = () => {
    todos.value.push({
      id: todos.value.length + 1,
      title: state.newTodo,
      completed: false,
    });
    state.newTodo = "";
  };
  const removeTodo = todo => {
    todos.value.splice(todos.value.indexOf(todo), 1);
  };

  // 副作用 只要todos改变 自动执行保存到本地
  watchEffect(() => {
    todoStorage.save(todos.value);
  });
  return {
    todos,
    removeTodo,
    addTodo,
  };
}
